<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>角色管理</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/elementui/index.css">

    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
</head>
<body>
<div id="app">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="出/入库单号">
            <el-input v-model="formInline.user" placeholder="请输入出/入库单号"></el-input>
        </el-form-item>
        <el-form-item label="批次">
            <el-input v-model="formInline.region" placeholder="请输入批次号"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>

    <el-table
            :data="ioware"
            border
            :row-class-name="tableRowClassName"
            style="width: 100%">

        <el-table-column
                label="编号">
            <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column
                label="调拨相关单号">
            <template slot-scope="scope">{{ scope.row.companyId }}</template>
        </el-table-column>
        <el-table-column
                label="批次">
            <template slot-scope="scope">{{ scope.row.batch }}</template>
        </el-table-column>
        <el-table-column
                label="产品名称">
            <template slot-scope="scope">{{ scope.row.pname }}</template>
        </el-table-column>
        <el-table-column
                label="产品型号">
            <template slot-scope="scope">{{ scope.row.pbrand }}</template>
        </el-table-column>
        <el-table-column
                label="产品数量">
            <template slot-scope="scope">{{ scope.row.pnum }}</template>
        </el-table-column>
        <el-table-column
                label="仓库名称">
            <template slot-scope="scope">{{ scope.row.wname }}</template>
        </el-table-column>
        <el-table-column
                label="出入库时间">
            <template slot-scope="scope">{{ scope.row.ioTime }}</template>
        </el-table-column>
        <el-table-column
                label="出入库类型">
            <template slot-scope="scope">{{ scope.row.ioType }}</template>
        </el-table-column>

        <el-table-column
                label="出入/库单号">
            <template slot-scope="scope">{{ scope.row.ioNo }}</template>
        </el-table-column>

    </el-table>
</div>
<script src="/vue/vue.js"></script>
<script src="/axios/axios.min.js"></script>
<script src="/qs/qs.min.js"></script>
<script src="/elementui/index.js"></script>
<script>

    new Vue({
        el: "#app",
        data() {

            return {
                ioware:null,
                total: 0,   //总条数
                current: 0, //当前页数
                pageSize: 0,//每页条数
                formInline:{
                    user:'',
                    region:''
                },
            }
        },
        methods: {
            // 小表单提交
            onSubmit(){
                var ioNo = this.formInline.user;
                var batch = this.formInline.region;
                ioNo.isPrototypeOf()
                if (ioNo.length == 0 && batch.length == 0){    // 搜索框无内容
                    axios.get("/iowarehouse?current=" + this.current).then(value => {
                        if(value.data.state == 1){
                            console.log("进来了");
                            this.ioware = value.data.data.records;
                            this.total = value.data.data.total;
                            this.pageSize = value.data.data.size;
                            this.current = value.data.data.current;
                        }
                    });
                }else if (ioNo.length > 0 && batch.length == 0){    // 只有出入库单号
                    axios.post("/searchIoNo/"+ioNo+"?current="+this.current).then(value =>{
                        if (value.data.state == 1){
                            this.ioware = value.data.data.records;
                            this.total = value.data.data.total;
                            this.pageSize = value.data.data.size;
                            this.current = value.data.data.current;
                        }
                    });
                }else if (ioNo.length == 0 && batch.length > 0){    // 只有批次
                    axios.post("/searchBatch/"+batch+"?current="+this.current).then(value =>{
                        if (value.data.state == 1){
                            this.ioware = value.data.data.records;
                            this.total = value.data.data.total;
                            this.pageSize = value.data.data.size;
                            this.current = value.data.data.current;
                        }
                    });
                }else if (ioNo.length > 0 && batch.length > 0){     // 出入库单号和批次都有
                    axios.post("/search/"+ioNo+"/"+batch+"?current="+this.current).then(value =>{
                        if (value.data.state == 1){
                            this.ioware = value.data.data.records;
                            this.total = value.data.data.total;
                            this.pageSize = value.data.data.size;
                            this.current = value.data.data.current;
                        }
                    });
                }
            },


            //当前页跳转的方法
            loadPage(current) {
                this.current = current;

                //查询商品
                axios.get("/iowarehouse?current=" + current).then(value => {
                        if (value.data.state == 1) {
                            console.log("进来了")
                            this.ioware = value.data.data.records;
                            this.total = value.data.data.total;
                            this.pageSize = value.data.data.size;
                            this.current = value.data.data.current;
                        }
                    },
                );

            },
            tableRowClassName({row, rowIndex}) {
                this.ioware[rowIndex].id=rowIndex+1;
                if (rowIndex %2 === 0) {
                    return 'warning-row';
                } else if (rowIndex %2 === 1) {
                    return 'success-row';
                }
                return '';
            }
        },

        mounted() {
            this.loadPage(1)

            //加载所有的权限

        }
    })


</script>
</body>
